<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSGO Update to CS2</title>
</head>

<body>
    <!-- el作用条件外部没用 -->
    {{message}}
    <div id="app">
        Game name: {{ message }}
        <span>
            <!-- el命中元素内部可以嵌套 -->
            {{message}}
        </span>
        <div>
            {{school.name}}
            和
            {{school.mobile}}
        </div>
        <div>
            {{campus[0]}}
            {{campus[1]}}
            {{campus[2]}}
            {{campus[3]}}
        </div>

        <!-- 对于可以改变的html级别的东西，用v-html改动，而v-text(也是{{}})只能修饰文本 -->
        <div v-html="dynamicHtml"></div>

        <!-- 下面是v-on的写法，第二种是简写的方式 -->
        <button v-on:click="updateDynamicHtml">更新动态内容</button>
        <button @dblclick="updateDynamicHtml">双击更新动态内容</button>

    </div>
    <!-- 若获取不了message,稍等,js文件没加载好 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",//#app是id选择器
            //.app是class选择器
            //直接div写就是标签选择器
            //el只建议挂载到div标签上，因为它没有自带样式
            //el不能挂载到html或者body上
            data: {
                message: "反恐精英",
                school: {
                    name: "Danding",
                    mobile: "400-231312"
                },
                campus: [11, 22, 33, 44],
                // 动态内容
                dynamicHtml: '<p>初始动态内容...</p>',
            },
            methods: {
                // 用this可以同步修改数据,轻松
                updateDynamicHtml() {
                    this.dynamicHtml = `
                        <div class="alert alert-success">
                            <h4>内容已更新</h4>
                            <p>更新时间: ${new Date().toLocaleTimeString()}</p>
                        </div>
                    `;
                }
            }
        })
    </script>


</body>

</html>